<template>
  <view class="box">
    <view class="item" v-for="(item, index) in list" :key="index">
      <!-- <i class="icon el-icon-s-order" style="background: rgb(129, 157, 205)"></i> -->
      <i :class="'icon ' + item.icon" :style="{ background: item.color }"></i>
      <view class="right">
        <view class="tit">
          <text style="margin-right: 4px">{{ item.title }}</text>
          <el-tooltip
            :content="item.content"
            placement="right-end"
            effect="dark"
          >
            <i class="el-icon-warning-outline"></i>
          </el-tooltip>
        </view>
        <animate-number
          ref="now"
          class="money"
          :from="0"
          :to="item.value"
          duration="1000"
          easing="easeOutQuad"
          :formatter="formatter"
          :key="item.value"
        >
        </animate-number>
        <text :class="per(item.value, item.value2) >= 0 ? 'roll2' : 'roll'"
          >{{ per(item.value, item.value2) }}%
          <i
            class="el-icon-caret-bottom"
            style="color: #67c23a"
            v-if="per(item.value, item.value2) < 0"
          ></i>
          <i
            class="el-icon-caret-top"
            style="color: #ed4014"
            v-if="per(item.value, item.value2) >= 0"
          ></i
        ></text>
      </view>
    </view>
  </view>
</template>

<script>
var vk = uni.vk;
export default {
  data() {
    return {
      all_area: 0,
      now_area: 0,
      all_order: 0,
      now_order: 0,
      all_pay: 0,
      now_pay: 0,
      all_time: 0,
      now_time: 0,
      all_way: 0,
      now_way: 0,
      all_back: 0,
      now_back: 0,
      list: [
        {
          icon: "vk-icon-myfill",
          color: "#1890ff",
          title: "访客数",
          content: "在选定条件下，访问商城首页的去重人数",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-attention_light",
          color: "#00c050",
          title: "浏览量",
          content:
            "在选定条件下，用户浏览商城页面的次数。每打开一个页面或每刷新一次页面都记录1次",
          value: 0,
          value2: 0,
        },
        //加购件数
        {
          icon: "vk-icon-friendadd",
          color: "#ffab2b",
          title: "新增用户数",
          content: "在选定条件下，新注册的用户",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-friendfavor",
          color: "#b37feb",
          title: "成交用户数",
          content: "在选定条件下，下单并支付成功的用户",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-refresh",
          color: "#1890ff",
          title: "访客-支付转换率",
          content: "在选定条件下，全部成交客户数 / 商城访客数",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-vip",
          color: "#00c050",
          title: "会员人数",
          content: "在选定条件下，通过各种方式成为会员的用户数，不是普通用户",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-gudongfenhong",
          color: "#ffab2b",
          title: "客单价",
          content: "在选定条件下，用户支付的总金额 / 支付人数",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-friend",
          color: "#b37feb",
          title: "累计用户数",
          content: "筛选时间截止时，商城的总用户",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-friendfamous",
          color: "#1890ff",
          title: "累计成交用户数",
          content: "筛选时间截止时，下单并支付成功的用户",
          value: 0,
          value2: 0,
        },
        {
          icon: "vk-icon-group_fill",
          color: "#00c050",
          title: "累计会员数",
          content: "筛选时间截止时，具有商城会员身份的用户数",
          value: 0,
          value2: 0,
        },
      ],
    };
  },
  methods: {
    formatter: function (num) {
      //判断num是否是小数
      if (num % 1 === 0) {
        //不是小数
        return num;
      }
      //是小数
      return num.toFixed(2);
    },
    per(a, b) {
      if (a == 0 && b == 0) return 0;
      if (a == 0) return -100;
      if (b == 0) return 100;
      return (((a - b) / b) * 100).toFixed(2);
    },
    async init(time) {
      const res = await vk.callFunction({
        url: "admin/business/kh.stats.userView",
        data: { time },
      });
      this.list = res.list;
      this.$emit("comp");
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fff;
  padding: 20px 16px 0 16px;
  display: flex;
  flex-wrap: wrap;
}

.item {
  display: flex;
  width: 20%;
  margin-bottom: 24px;
  .icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #409eff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }
  .right {
    display: flex;
    margin-left: 14px;
    flex-direction: column;
    font-size: 14px;
    color: #666;
    .money {
      color: #333;
      font-size: 30px;
    }
    .roll {
      font-style: italic;
      font-size: 12px;
      color: #67c23a;
    }
    .roll2 {
      font-style: italic;
      font-size: 12px;
      color: #ed4014;
    }
    .roll::before {
      content: "环比减少：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
    .roll2::before {
      content: "环比增长：";
      font-style: normal;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
